<template>
  <a-modal
    :open="open"
    width="1100px"
    title="护理措施模板"
    centered
    destroy-on-close
    :ok-button-props="{ disabled: !selectItem?.id }"
    @ok="onOk"
    @cancel="onCancel"
  >
    <div class="flex justify-between">
      <a-input v-model:value="searchkey" class="w-60" placeholder="套餐名称/助记码" allow-clear />
      <a-space>
        <a-button type="default" @click="onReset">重置</a-button>
        <a-button type="primary" @click="onSearch">搜索</a-button>
      </a-space>
    </div>
    <div class="flex justify-between h-[440px] mt-2">
      <div class="w-60 bg-thin h-full flex flex-col items-center">
        <div class="flex-1 flex relative overflow-hidden">
          <BaseList :data-source="dataSource" :loading="loading" class="flex-1 overflow-auto pb-10">
            <template #renderItem="{ item }">
              <div
                :key="item.id"
                class="py-2 px-3 flex justify-between items-center list-items"
                :class="{ active: selectItem?.id === item.id }"
                @click="onSelect(item)"
              >
                <div :class="preview ? 'w-full' : 'w-[80%]'">
                  <div class="name font-bold mr-2">{{ item.methodName }}</div>
                </div>
              </div>
            </template>
          </BaseList>
        </div>
      </div>
      <div class="ml-4 flex-auto min-w-0 border p-2">{{ selectItem?.methodContent }}</div>
    </div>
  </a-modal>
</template>
<script setup>
import { ref, watch } from 'vue'
import { message } from 'ant-design-vue'

const emit = defineEmits(['update:open', 'success'])
const props = defineProps({
  open: {
    type: Boolean,
    default: false
  }
})
const searchkey = ref('')
const dataSource = ref([])
const selectItem = ref({})
const suitListRef = ref()

const onSelect = (item) => {
  selectItem.value = item
}

const onCancel = () => {
  searchkey.value = ''
  emit('update:open', false)
}

watch(
  () => props.open,
  () => {
    getData()
  }
)
const onSearch = () => {
  suitListRef.value.getData()
}

const onReset = () => {
  searchkey.value = ''
  getData()
}
const getData = async () => {
  const { code, msg, data } = await post('/inp/InpDictNursingMethod/getInpNursingMethod', {
    zjm: searchkey.value,
    pageNum: 1,
    pageSize: 999
  })
  if (code !== 0) return message.error(msg || '失败')
  dataSource.value = data
}
const onOk = async () => {
  emit('success', selectItem.value.methodContent)
  onCancel()
}
</script>
